<template>
  <div class="job-opportunity">
    <main class="main-content">
      <div class="left-info">
        <el-scrollbar class="scroll el-scrollbar-x-hidden">
          <div class="avatar-box">
            <img class="avatar" :src="userInfo.src_p || defaultAvatar" alt="" />
            <div class="name">{{ userInfo.Iname_p || "-" }}</div>
          </div>
          <div class="info-wrapper">
            <div class="info-item">
              <span class="title">学历：</span>
              <span class="value">{{ userInfo.Edu_p || "-" }}</span>
            </div>
            <div class="info-item">
              <span class="title">专业：</span>
              <span class="value">{{
                userInfo.Zye_p || userInfo.Zym_p || "-"
              }}</span>
            </div>
            <div class="info-item">
              <span class="title">毕业院校：</span>
              <span class="value">{{ userInfo.School_p || "-" }}</span>
            </div>
            <div class="info-item">
              <span class="title">毕业时间：</span>
              <span class="value">{{
                getStopEduDate(userInfo.personEdusArr)
              }}</span>
            </div>
            <div class="info-item">
              <span class="title">求职意向：</span>
              <div
                class="value line-clamp"
                v-if="Array.isArray(userInfo.person_job_array)"
              >
                <div
                  v-for="(item, index) in userInfo.person_job_array"
                  :key="index"
                >
                  {{ item }}
                </div>
              </div>
            </div>
          </div>
          <div class="commend-jobs">
            <div class="title">建议职业：</div>
            <div class="tags-container" v-loading="associatedPositionLoading">
              <el-button
                class="button-new-tag"
                size="small"
                icon="el-icon-plus"
                @click="handleShowPositionSelect"
                >添加建议职业</el-button
              >
              <el-tag
                v-for="(tag, index) in associatedPositionList"
                closable
                :disable-transitions="false"
                :key="index"
                @close="handleClose(tag)"
              >
                {{ tag.positionName }}
              </el-tag>
            </div>
          </div>
        </el-scrollbar>
      </div>
      <div class="right-table">
        <div class="right-container">
          <div class="tips-container">
            <p>1. 职业机会月报于每月1日自动生成上一月内容并自动发布；</p>
            <p>2. 职业机会周报于每周一自动生成上一周内容并自动发布；</p>
            <p>
              3.
              点击关联后，将自动为该用户关联相关的职业机会，并通过订阅的模式向该用户推送并呈现；
            </p>
            <p>
              4.
              点击取消后，将自动将某职业从该用户的订阅信息列表中移除，后续不再推送相关信息。
            </p>
          </div>
          <div class="list-container">
            <el-table
              ref="multipleTable"
              :data="jobList"
              v-loading="jobLoading"
              tooltip-effect="dark"
              style="width: calc(100% - 6px)"
              max-height="520"
            >
              <el-table-column
                label="职业"
                prop="positionName"
                show-overflow-tooltip
                min-width="100"
              >
              </el-table-column>
              <el-table-column
                label="最新职业机会标题"
                prop="title"
                show-overflow-tooltip
                min-width="140"
              >
                <template slot-scope="scope">{{
                  scope.row.title || "-"
                }}</template>
              </el-table-column>
              <el-table-column
                prop="title"
                label="更新频率"
                show-overflow-tooltip
                min-width="90"
              >
                <template slot-scope="scope">{{
                  getFrequency(scope.row.title || "")
                }}</template>
              </el-table-column>
              <el-table-column
                prop="ctime"
                label="最新发布时间"
                show-overflow-tooltip
                min-width="120"
              >
                <template slot-scope="scope">{{
                  getFormatDate(scope.row.ctime || "")
                }}</template>
              </el-table-column>
              <el-table-column prop="isCareer" label="状态" min-width="70">
                <template slot-scope="scope">
                  <span
                    :class="[
                      scope.row.isCareer == 1 ? 'connect' : 'disconnect',
                    ]"
                    >{{ scope.row.isCareer == 1 ? "已关联" : "未关联" }}</span
                  >
                </template>
              </el-table-column>
              <el-table-column
                prop="careerId"
                label="操作"
                fixed="right"
                min-width="70"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    :disabled="!scope.row.title"
                    @click="handleConnectOrCancel(scope.row)"
                    >{{ scope.row.isCareer == 1 ? "取消" : "关联" }}</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </main>
    <el-dialog
      title="职业搜索"
      :visible.sync="positionSelectVisible"
      width="600px"
      append-to-body
      :before-close="handleCloseDialog"
    >
      <el-select
        style="width: 100%"
        v-model="positionIds"
        multiple
        filterable
        remote
        reserve-keyword
        placeholder="请输入职业名称"
        :remote-method="matchPositionListFn"
        :loading="loading"
      >
        <el-option
          v-for="item in matchList"
          :key="item.ylPositionId"
          :label="item.positionName"
          :value="item.ylPositionId"
        >
        </el-option>
      </el-select>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleCloseDialog">取 消</el-button>
        <el-button size="small" type="primary" @click="handleConfirm"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import defaultAvatar from "@/assets/images/defaultAvatar.png";
import {
  getUserInfo,
  editAssociatedPosition,
  getAssociatedPositionList,
  connectCareer,
  articleSearch,
  matchPositionList,
  positionsSearch,
} from "@/api/index";
import { formatDate } from "@/utils/getNDate";
import page from "@/mixin/page";
export default {
  name: "PositionSubscribe",
  components: {},
  mixins: [page],
  props: {
    selectedRow: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      defaultAvatar,
      userInfo: {
        Iname_p: "",
        Edu_p: "",
        School_p: "",
        Zym_p: "",
        personEdusArr: [],
        person_job_array: [],
      },
      positionSelectVisible: false,
      jobLoading: false,
      associatedPositionLoading: false,
      recommendLoading: false,
      loading: false,
      inputValue: "",
      jobList: [],
      recommendList: [],
      value: "",
      iframeSrc: "",
      associatedPositionList: [],
      multipleSelection: [],
      matchList: [],
      currentType: "add",
      positionIds: [],
      form: {
        matchZpName: "",
        regionid: "440305",
        salary: "",
        gznum: "",
        eduId: "",
      },
    };
  },
  created() {
    this.getUserInfoFn();
    this.getAssociatedPositionListFn();
  },
  methods: {
    // 顾问推荐板块
    selectable(row) {
      if (!row.pushed || row.pushed == 0) {
        return true;
      } else {
        return false;
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getData() {
      this.recommendLoading = true;
      const params = {
        pageNo: this.page.currentPage,
        pageSize: this.page.pageSize,
        personId: this.selectedRow.personId,
        ...this.form,
      };
      positionsSearch(params)
        .then((res) => {
          if (res.code == 200) {
            this.recommendList = res.data;
            this.page.sums = res.pageparam.sums;
          }
        })
        .finally(() => {
          this.recommendLoading = false;
        });
    },
    getFormatDate(value) {
      if (!value) {
        return "-";
      }
      const time = value + "000";
      return formatDate(+time).slice(0, 10);
    },
    getStopEduDate(arr) {
      if (Array.isArray(arr) && arr.length) {
        return arr[arr.length - 1].stopdate || "-";
      } else {
        return "-";
      }
    },
    getFrequency(value) {
      if (!value) {
        return "-";
      }
      if (value.includes("月报")) {
        return "月报";
      } else if (value.includes("周报")) {
        return "周报";
      } else {
        return "-";
      }
    },
    handleConnectOrCancel(val) {
      const { isCareer, careerId } = val;
      const params = {
        id: careerId,
        isCareer: isCareer == 1 ? "0" : "1",
      };
      connectCareer(params).then((res) => {
        if (res.code == 200) {
          val.isCareer = params.isCareer == "1" ? 1 : 0;
          this.$message.success(
            `${params.isCareer == "1" ? "关联成功" : "已取消关联"}`
          );
        }
      });
    },
    handleClose(tag) {
      this.$confirm("确定删除此建议职业？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        const params = {
          type: "1",
          positionId: tag.positionId,
          personId: this.selectedRow.personId,
        };
        this.editAssociatedPositionFn(params);
      });
    },
    handleShowPositionSelect() {
      this.currentType = "add";
      this.positionSelectVisible = true;
    },
    async getAssociatedPositionListFn() {
      this.jobLoading = true;
      this.associatedPositionLoading = true;
      const params = {
        personId: this.selectedRow.personId,
      };
      const res = await getAssociatedPositionList(params);
      this.associatedPositionLoading = false;
      if (res.code == 200) {
        this.associatedPositionList = res.data;
        this.jobList = [];
        let promiseArr = [];
        let promiseParams = [];
        this.associatedPositionList.forEach((item) => {
          const params = {
            ylPositionName: item.positionName,
            isCareer: item.isCareer,
            careerId: item.id,
          };
          promiseParams.push(params);
          promiseArr.push(articleSearch(params));
        });
        Promise.all(promiseArr)
          .then((res) => {
            res.forEach((item, index) => {
              if (item.code == 200) {
                if (!Array.isArray(item.data) || !item.data.length) {
                  item.data = [{}];
                }
                item.data[0].positionName = promiseParams[index].ylPositionName;
                item.data[0].isCareer = promiseParams[index].isCareer;
                item.data[0].careerId = promiseParams[index].careerId;
                this.jobList = [...this.jobList, ...item.data];
              }
            });
          })
          .finally(() => {
            this.jobLoading = false;
          });
      }
    },
    editAssociatedPositionFn(params) {
      editAssociatedPosition(params).then((res) => {
        if (res.code == 200) {
          this.$message.success(`${params.type == "0" ? "添加" : "删除"}成功`);
          this.getAssociatedPositionListFn();
          this.positionIds = [];
        }
      });
    },
    getUserInfoFn() {
      const params = {
        personId: this.selectedRow.personId,
      };
      getUserInfo(params).then((res) => {
        if (res.code == 200) {
          this.userInfo = res.data;
        }
      });
    },
    matchPositionListFn(keyword) {
      if (keyword !== "") {
        this.loading = true;
        matchPositionList({ matchTitle: keyword })
          .then((res) => {
            if (res.code == 200) {
              this.matchList = res.data;
            }
          })
          .finally(() => {
            this.loading = false;
          });
      } else {
        this.matchList = [];
      }
    },
    handleConfirm() {
      const temp = this.uniqueFn();
      const params = {
        type: "0",
        positionId: temp.join(","),
        personId: this.selectedRow.personId,
      };
      this.editAssociatedPositionFn(params);
      this.positionSelectVisible = false;
    },
    handleCloseDialog() {
      this.keyword = "";
      this.positionIds = [];
      this.positionSelectVisible = false;
    },
    uniqueFn() {
      const positionIdArr = this.associatedPositionList.map(
        (item) => item.positionId
      );
      return this.positionIds.filter((item) => !positionIdArr.includes(item));
    },
  },
};
</script>

<style lang="scss" scoped>
.job-opportunity {
  height: 100%;
  .header {
    display: flex;
    align-items: center;
    .title {
      font-size: 22px;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 800;
      color: #222222;
      line-height: 30px;
    }
    /deep/ .el-tabs {
      flex: 1;
    }
    /deep/ .el-tabs__item {
      font-size: 16px;
    }
    /deep/ .el-tabs__header .el-tabs__nav-wrap {
      padding: 0;
      margin-left: 30px;
    }
  }
  .main-content {
    display: flex;
    height: calc(100% + 17px);
    .left-info {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding-top: 14px;
      width: 300px;
      height: 100%;
      border-right: 1px solid #cac7c7;
      .scroll {
        height: 100%;
        width: 100%;
      }
      .avatar-box {
        display: flex;
        align-items: center;
        .avatar {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          margin-right: 20px;
        }
        margin-bottom: 18px;
      }
      .name {
        font-size: 24px;
        font-weight: 800;
        color: #222222;
        margin-bottom: 10px;
      }
      .info-wrapper {
        display: flex;
        flex-direction: column;

        .info-item {
          display: flex;
          padding: 10px 0;
          .title {
            font-size: 16px;
            font-weight: 400;
            color: #888585;
            margin-right: 10px;
            flex-shrink: 0;
          }
          .value {
            font-size: 16px;
            font-weight: 400;
            color: #333;
          }
          .line-clamp {
            line-height: 26px;
            margin-top: -4px;
          }
        }
      }
      .commend-jobs {
        padding: 10px 0;
        .title {
          font-size: 16px;
          font-weight: 400;
          color: #888585;
          margin-right: 10px;
        }
        .tags-container {
          // display: flex;
          flex-direction: column;
          ::v-deep .el-tag {
            flex: 0;
            margin: 12px 10px 0 0;
            white-space: nowrap;
          }
          .button-new-tag {
            width: calc(100% - 18px);
            height: 32px;
            line-height: 30px;
            margin: 18px 10px 0 0;
            padding-top: 0;
          }
          .input-new-tag {
            width: calc(100% - 28px);
            vertical-align: bottom;
            margin: 0 10px;
          }
        }
      }
    }
    .right-table {
      width: 772px;
      height: 100%;
      .right-container {
        height: 100%;
        padding: 14px 0 14px 14px;
        .tips-container {
          p {
            font-size: 14px;
            line-height: 24px;
            color: #666;
            margin-bottom: 6px;
          }
        }
        .list-container {
          margin-top: 24px;
          .connect {
            color: #67c23a;
          }
          .disconnect {
            color: #909399;
          }
        }
      }
      .recommend-container {
        height: 100%;
        padding: 14px 0 14px 14px;
        .scroll {
          height: 100%;
        }
        .form-container {
          ::v-deep .el-form-item__label {
            line-height: 32px;
          }
          .my-form {
            ::v-deep .el-form-item__label {
              line-height: 24px;
            }
          }
          .flex {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            .input {
              width: calc(100% - 120px);
            }
            .search-btn {
              margin-left: 12px;
            }
            .box {
              padding: 0 6px;
              height: 24px;
              line-height: 24px;
              border: 1px solid transparent;
              align-self: flex-start;
              flex-shrink: 0;
              cursor: pointer;
              &.active {
                padding: 0 6px;
                color: #7052ff;
                border-radius: 3px;
                border: 1px solid #7052ff;
                height: 24px;
                line-height: 24px;
                cursor: pointer;
              }
            }
          }
        }
        .list-container {
          .btn-bar {
            margin: 12px 0;
          }
        }
      }
    }
  }
}
.iframe-contain {
  height: 600px;
}
</style>
